<template>
  <!--index页面中心跳转页面二级分类盒子-->
  <view class="entire">
    <view @click="handleTab1(0)">
      <CBSMenu
        title1="CBS"
        title2="商用建筑"
        :picture="cbsIcon"
        :active="data.active === 0"
      ></CBSMenu>
    </view>
    <view @click="handleTab1(1)">
      <CBSMenu
        title1="DBS"
        title2="民用建筑"
        :picture="dbsIcon"
        :active="data.active === 1"
        @click="handleTab1(1)"
      ></CBSMenu>
    </view>
    <view @click="handleTab1(2)">
      <CBSMenu title1="IND" title2="工业" :picture="indIcon" :active="data.active === 2"></CBSMenu>
    </view>
    <view @click="handleTab1(3)">
      <CBSMenu title1="WU" title2="市政水" :picture="wuIcon" :active="data.active === 3"></CBSMenu>
    </view>
    <view class="tab-bottom">
      <view style="display: flex" v-if="data.active === 0">
        <view class="tab-sec-1" @click="nav('CBS', 'CBS')">
          <view class="sec-top">商用建筑</view>
          <view class="sec-middle"></view>
          <view class="sec-bottom">CBS</view>
        </view>
        <view class="tab-sec-1" @click="nav('CBS', 'DE')">
          <view class="sec-top">区域能源</view>
          <view class="sec-middle"></view>
          <view class="sec-bottom">DE</view>
        </view>
      </view>
      <view style="display: flex" v-if="data.active === 1">
        <view class="tab-sec-1" @click="nav('DBS', 'Trade')">
          <view class="sec-top">贸易</view>
          <view class="sec-middle"></view>
          <view class="sec-bottom">TRADE</view>
        </view>
        <view class="tab-sec-1" @click="nav('DBS', 'HVAC-OAM')">
          <view class="sec-top">OEM制造商</view>
          <view class="sec-middle"></view>
          <view class="sec-bottom">HVAC-OAM</view>
        </view>
      </view>
      <view style="display: flex" v-if="data.active === 2">
        <view class="tab-sec-2" @click="nav('IND', 'FA')">
          <view class="sec-top">工厂</view>
          <view class="sec-middle"></view>
          <view class="sec-bottom">FA</view>
        </view>
        <view class="tab-sec-2" @click="nav('IND', 'MI')">
          <view class="sec-top">机加工</view>
          <view class="sec-middle"></view>
          <view class="sec-bottom">MI</view>
        </view>
        <view class="tab-sec-2" @click="nav('IND', 'WI')">
          <view class="sec-top">水处理</view>
          <view class="sec-middle"></view>
          <view class="sec-bottom">WI</view>
        </view>
        <view class="tab-sec-2" @click="nav('IND', 'OEM')">
          <view class="sec-top">OEM</view>
          <view class="sec-middle"></view>
          <view class="sec-bottom">OEM</view>
        </view>
        <view class="tab-sec-3" @click="nav('IND', 'MOBILITY')">
          <view class="sec-top">移动运输终端</view>
          <view class="sec-middle"></view>
          <view class="sec-bottom">MOBILITY</view>
        </view>
      </view>
      <view style="display: flex" v-if="data.active === 3">
        <view class="tab-sec-2" @click="nav('WU', 'WTP')">
          <view class="sec-top">一次供水</view>
          <view class="sec-middle"></view>
          <view class="sec-bottom">WS-WTP</view>
        </view>
        <view class="tab-sec-3" @click="nav('WU', 'WN')">
          <view class="sec-top">二次供水</view>
          <view class="sec-middle"></view>
          <view class="sec-bottom">WS—WN</view>
        </view>
        <view class="tab-sec-2" @click="nav('WU', 'DOSING')">
          <view class="sec-top">计量泵</view>
          <view class="sec-middle"></view>
          <view class="sec-bottom">DOSING</view>
        </view>
        <view class="tab-sec-2" @click="nav('WU', 'WW')">
          <view class="sec-top">污水</view>
          <view class="sec-middle"></view>
          <view class="sec-bottom">WW</view>
        </view>
        <view class="tab-sec-2" @click="nav('WU', 'FC')">
          <view class="sec-top">防洪</view>
          <view class="sec-middle"></view>
          <view class="sec-bottom">FC</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { initFlag, tabC1, tabC2 } from '@/components/GzIndexNavBox/courseTabControl'
import { cbsIcon, dbsIcon, indIcon, wuIcon } from '@/static/imgMap'
const data = reactive({
  active: 0,
})
const handleTab1 = (index) => {
  data.active = index
}
const nav = (tab1, tab2) => {
  tabC1.value = tab1
  tabC2.value = tab2
  initFlag.value = 1
  uni.switchTab({
    url: '/pages/courseCenter/courseCenter',
  })
}
</script>

<style scoped lang="scss">
.entire {
  width: 700rpx;
  display: flex;
  position: relative;
  justify-content: space-between;
  .tab-bottom {
    position: absolute;
    bottom: 0;
    width: 680rpx;
    height: 100rpx;
    background-color: rgba(20, 88, 148, 0.73);
    border-style: solid;
    border-width: 8rpx;
    border-color: rgb(241, 207, 99);
    display: flex;
  }
}
.tab-sec-1 {
  width: 340rpx;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right-color: #cfdbe8;
  border-right-width: 2rpx;
  border-right-style: solid;
  .sec-top {
    margin-top: 20rpx;
    height: 25rpx;
    color: white;
    font-size: 23rpx;
  }
  .sec-middle {
    margin-top: 5rpx;
    width: 150rpx;
    height: 6rpx;
    background: rgb(255, 255, 255);
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 35%,
      rgba(255, 255, 255, 0) 35%,
      rgba(255, 255, 255, 0) 65%,
      rgba(255, 255, 255, 1) 66%,
      rgba(255, 255, 255, 0) 100%
    );
  }
  .sec-bottom {
    height: 25rpx;
    color: white;
    font-size: 23rpx;
  }
}
.tab-sec-1 {
  width: 340rpx;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right-color: #cfdbe8;
  border-right-width: 2rpx;
  border-right-style: solid;
  .sec-top {
    margin-top: 20rpx;
    height: 25rpx;
    color: white;
    font-size: 23rpx;
  }
  .sec-middle {
    margin-top: 5rpx;
    width: 150rpx;
    height: 6rpx;
    background: rgb(255, 255, 255);
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 35%,
      rgba(255, 255, 255, 0) 35%,
      rgba(255, 255, 255, 0) 65%,
      rgba(255, 255, 255, 1) 66%,
      rgba(255, 255, 255, 0) 100%
    );
  }
  .sec-bottom {
    height: 25rpx;
    color: white;
    font-size: 23rpx;
  }
}
.tab-sec-2 {
  width: 130rpx;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right-color: #cfdbe8;
  border-right-width: 2rpx;
  border-right-style: solid;
  .sec-top {
    margin-top: 20rpx;
    height: 25rpx;
    color: white;
    font-size: 23rpx;
  }
  .sec-middle {
    margin-top: 5rpx;
    width: 120rpx;
    height: 6rpx;
    background: rgb(255, 255, 255);
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 35%,
      rgba(255, 255, 255, 0) 35%,
      rgba(255, 255, 255, 0) 65%,
      rgba(255, 255, 255, 1) 66%,
      rgba(255, 255, 255, 0) 100%
    );
  }
  .sec-bottom {
    height: 25rpx;
    color: white;
    font-size: 23rpx;
  }
}
.tab-sec-3 {
  width: 160rpx;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right-color: #cfdbe8;
  border-right-width: 2rpx;
  border-right-style: solid;
  .sec-top {
    margin-top: 20rpx;
    height: 25rpx;
    color: white;
    font-size: 23rpx;
  }
  .sec-middle {
    margin-top: 5rpx;
    width: 150rpx;
    height: 6rpx;
    background: rgb(255, 255, 255);
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 35%,
      rgba(255, 255, 255, 0) 35%,
      rgba(255, 255, 255, 0) 65%,
      rgba(255, 255, 255, 1) 66%,
      rgba(255, 255, 255, 0) 100%
    );
  }
  .sec-bottom {
    height: 25rpx;
    color: white;
    font-size: 23rpx;
  }
}
</style>
